<?
$CICUID = $_GET['CICUID'];
?>

<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript" src="../specs/js/protovis/protovis.min.js"></script>
    <script type="text/javascript" src="../specs/xivspecs/get-graph.php?CICUID=<?php echo $CICUID; ?>"></script>
  </head>
  <body>
		<script type="text/javascript+protovis">
			var w = document.body.clientWidth,
				h = document.body.clientHeight,
				colors = pv.Colors.category19();
				
			var vis = new pv.Panel()
				.width(w)
				.height(h)
				.fillStyle("white")
				.event("mousedown", pv.Behavior.pan())
				.event("mousewheel", pv.Behavior.zoom(5));
			
			var force = vis.add(pv.Layout.Force)
				.nodes(miserables.nodes)
				.links(miserables.links);
				
			force.link.add(pv.Line);
			
			force.node.add(pv.Dot)
				.size(function(d) (d.linkDegree + 4) * Math.pow(this.scale, -1.5))
				.fillStyle(function(d) d.fix ? "brown" : colors(d.group))
				.strokeStyle(function() this.fillStyle().darker())
				.lineWidth(1)
				.title(function(d) d.nodeName)
				.event("mousedown", pv.Behavior.drag())
				.event("drag", force);
			vis.render();
		</script>
  </body>
</html>